<template>
  <div class="admin_index">
    <el-form :label-position="'left'" label-width="80px" :model="formLabelAlign" style="width:400px">
      <el-form-item label="主题名称">
        <el-input v-model="formLabelAlign.name"></el-input>
      </el-form-item>
      <el-form-item label="主题封面">
        <el-input v-model="formLabelAlign.cover"></el-input>
      </el-form-item>
    </el-form>
    <el-button @click="addTheme">添加主题</el-button>
    <el-divider></el-divider>
    <el-table border :data="tableData" stripe style="width: 100%">
      <el-table-column prop="id" label="主题ID" width="180"></el-table-column>
      <el-table-column prop="name" label="主题名称" width="180"></el-table-column>
      <el-table-column prop="cover" label="主题封面"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formLabelAlign: {
        name: "",
        cover: "",
      },
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ]
    };
  },
  mounted() {},
  methods:{
      async addTheme(){
          console.log(this.$api)
          const res = await this.$api.themeApi.addTheme(this.formLabelAlign)
            console.log(res);

      }
  }
};
</script>

<style lang="less" scoped>
.back {
  display: inline-block;
  padding: 6px 10px;
  margin-bottom: 20px;
  background-color: #3963bc;
  color: #fff;
  margin-right: 20px;
}
.admin_index {
  // min-width: 1280px;
  padding: 20px;
}
.box-card {
  margin-top: 20px;
}
</style>